<template>
    <view class="commentsWrap">
			<view class="list-item" :style="{paddingBottom: index === commentsList.length - 1 ? '120rpx' : ''}" v-for="(item, index) in commentsList" :key="index">
				<view class="header">
					<view class="imgWrap">
						<image :src="item.userAvatarUrl" mode="aspectFit"></image>
					</view>
					<view class="userInfoWrap">
						<view class="userInfo">
							<view class="userWrap">
								<view class="username">{{ item.userName }}</view>
							</view>
							<view class="timeStampWrap">
								<view class="time">{{ item.commentTime | completeFormat }}</view>
							</view>
						</view>
					</view>	
					<view class="likeWrap" @tap="thumbsUp(index)">
						<text class="likeCount">{{ item.likeCount | likeCountFormat }}</text>
						<i class="iconfont icon-thumbs-up" :style="{color: item.liked ? likedClass : unlikeClass }"></i>
					</view>
				</view>
				<view class="contentWrap">
					<view class="content">
						<text>{{ item.content | textTransform }}</text>
					</view>
				</view>
			</view>
    </view>
</template>

<script>
export default {
		props:['commentsList'],
		watch:{
			commentsList(){
				// console.log('comments组件commentsList：', this.commentsList)
			}
		},
    data() {
       return {
				 likedClass: '#ff3a3a',
				 unlikeClass: '#737374'
       }
    },
		methods: {
			thumbsUp(index) {
				let that = this
				let userInfo = uni.getStorageSync('userInfo')
				let cookie = userInfo.cookie
				if (!that.commentsList[index].liked) {
					uni.request({
						url: `${that.$http.vercelUrl}/comment/like?id=${that.commentsList[index].mid}&cid=${that.commentsList[index].commentId}&t=1&type=0`,
						header:{cookie},
						success(res) {
							// console.log('歌曲点赞数据：', res);
							that.commentsList[index].liked = !that.commentsList[index].liked
							that.commentsList[index].likeCount += 1
						},
						fail(e) {
							console.log('点赞失败：',e)
						}
					})
				} else {
					uni.request({
						url: `${that.$http.vercelUrl}/comment/like?id=${that.commentsList[index].mid}&cid=${that.commentsList[index].commentId}&t=0&type=0`,
						header:{cookie},
						success(res) {
							that.commentsList[index].liked = !that.commentsList[index].liked
							that.commentsList[index].likeCount -= 1
						},
						fail(e) {
							console.log('取消点赞失败：',e)
						}
					})
				}
			}
		}
}
</script>

<style lang="scss" scoped>
	
.commentsWrap {
	width: 100%;
	height: 100%;
	.list-item {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-bottom: 15px;
		.header {
			width: 100%;
			height: 59.6rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10px;
			.imgWrap {
				width: 2.5rem;
				height: 52.6rpx;
				border-radius: 50%;
				overflow: hidden;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.userInfoWrap {
				display: flex;
				justify-content: flex-start;
				width: 100%;
				height: 100%;
				.userInfo {
					display:flex;
					flex-direction: column;
					justify-content: center;
					align-items: flex-start;
					padding-left: 17rpx;
					.userWrap {
						.username {
							color: #a09f9f;
							font-size: 27rpx;
						}
					}
					.timeStampWrap {
						color: #5e5c5c;
						font-size: 20rpx;
					}
				}
			}
			.likeWrap {
				width: 233rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				padding-right: 40rpx;
				font-size: 26rpx;
				.likeCount {
					color: #737374
				}
				.iconfont {
					padding-bottom: 4rpx;
					padding-left: 3rpx;
				}
			}
		}
		.contentWrap {
			width: 100%;
			position: relative;
			.content {
				margin-left: 74rpx;
				width: 83%;
				font-size: 28rpx;
				color: rgba(255, 255, 255, 0.89);
				border-bottom: 1rpx solid #6c6767;
				padding-bottom: 15px;
				text {
					
				}
			}
		}
	}
}

</style>
